<template>
    <div>
        <van-sticky>
            <van-tabs v-model:active="tabActive" background="#b4b4b4" class="tab-aaa">
                <van-tab name="a" title="播放" />
                <van-tab name="b" title="平铺" />
            </van-tabs>
        </van-sticky>
        <div v-show="tabActive=='a'">
            <div class="rand-img" v-if="showPic">
                <p>{{ showPic.time }}</p>
                <div class="pic-img">
                    <img :style="picWidth" :src="showPic.url" />
                </div>
                <div class="text-ggg">
                    <span>当前缩放:{{s}}倍</span>
                    <div class="gg-22">数据来源:<van-button size="small" @click="webpopup=true" type="primary">
                            {{webIndexStr}}</van-button></div>
                </div>
            </div>
            <div @click="popup_show = true" class="time-g">
                <p>开始时间:{{showTime.start}}</p>
                <p>结束时间:{{showTime.end}}</p>
            </div>
            <MyCalendar :vdate="[start, end]" :popup_show="popup_show" @close="popup_show = false" @dateRes="dateRes">
            </MyCalendar>
            <div class="slider-div">
                <van-slider bar-height="5" v-model="playIndex" :min="0" :max="list.length-1" />
            </div>

            <div class="play-btn-g">
                <van-button type="primary" @click="s=s>1?(s-0.25):1" :disabled="s==1">缩小</van-button>
                <van-button type="primary" @click="s=1">重置</van-button>
                <van-button type="primary" @click="s=s+0.25">放大</van-button>
            </div>

            <div class="play-btn-g">
                <van-button type="primary" @click="playIndex--" :disabled="playIndex==0">上一个</van-button>
                <van-button v-if="!timer" type="primary" @click="play_rand()"
                    :disabled="playIndex>=(list.length-1)">播放</van-button>
                <van-button v-else type="primary" @click="clearTimer()">暂停</van-button>
                <van-button type="primary" @click="playIndex++" :disabled="playIndex>=(list.length-1)">下一个</van-button>
            </div>
        </div>
        <div v-show="tabActive=='b'">
            <div class="pic-img-box" v-for="(item,index) in  list.slice().reverse()">
                <p class="title-txt"><span class="num">{{index+1}}</span>{{item.time}}</p>
                <img :style="picWidth" :src="item.url" />
            </div>
        </div>

        <link-botton-group></link-botton-group>
    </div>
</template>
<script>
    import { generateRadarUrls, getRadarList } from "@/api/weather_radar";

    import MyCalendar from "./VantCalendar/VantCalendar.vue";
    import dayjs from 'dayjs'
    export default {
        components: {
            MyCalendar
        },
        data() {

            var start = new Date(new Date().toLocaleDateString());
            var end = new Date();
            start.setDate(end.getDate() - 5)
            const webList = [{ "key": 1, "label": "广东雷达" }, { "key": 2, "label": "广州雷达" }, { "key": 3, "label": "深圳雷达" }, { "key": 4, "label": "阳江雷达" }, { "key": 5, "label": "肇庆雷达" }];
            return {
                RadarList: getRadarList(),
                list: [],
                start,
                end,
                playIndex: 0,
                popup_show: false,
                interval: 0.5,
                timer: false, s: 1, webList, webIndex: 1, webpopup: false, tabActive: "a"
            };
        },
        watch: {
            webIndex(new_val, old_val) {
                if (new_val !== old_val) {
                    this.initData();
                }
            }
        },
        created() {
            this.initData();
        },
        computed: {
            webIndexStr() {
                const res = this.webList.find(item => (item.key == this.webIndex));
                return res.label;
            },
            showPic() {
                if (!this.list) {
                    return null;
                }
                return this.list[this.playIndex];
            },
            picWidth() {
                return 'width:' + (this.s * 100) + "%"
            },
            showTime() {
                const start = dayjs(this.start).format("YYYY-MM-DD HH:mm");
                const end = dayjs(this.end).format("YYYY-MM-DD HH:mm");
                return { start, end }
            }
        },
        methods: {
            clearTimer() {
                clearInterval(this.timer); this.timer = false;
            },
            dateRes(val) {
                this.start = val.start;
                this.end = val.end;
                this.initData();
            },
            initData() {
                const startTime =  new Date(this.start.getTime() - 240 * 60 * 1000);
                const endTime =  new Date(this.end .getTime() - 50 * 60 * 1000);
                if (this.timer) {
                    clearInterval(this.timer);
                    this.timer = false;
                }
                
                var res = generateRadarUrls(startTime, endTime);
                this.playIndex = 0;
                this.list = res;
            },
            play_rand() {
                this.timer = setInterval(() => {
                    if (this.playIndex >= (this.list.length - 1)) {
                        clearInterval(this.timer);
                        this.timer = false;
                        return;
                    }
                    this.playIndex++;
                }, this.interval * 1000);
            },
        },
        beforeDestroy() {
            if (this.timer) {
                clearInterval(this.timer); //关闭
            }

        }
    }
</script>
<style>
    .rand-img img {
        width: 100%;
    }

    .rand-img {
        font-size: 18px;
    }

    .play-btn-g {
        display: flex;
        justify-content: space-evenly;
        margin-top: 30px;
    }

    .slider-div {
        padding: 15px 50px;
        margin: 40px 0;
    }

    .pic-img {
        height: 76vw;
        overflow: auto;

    }

    .time-g {
        font-size: 18px;
        padding: 0;
        margin: 15px;
        text-align: center;
    }

    .rand-img p {
        /* padding: 0 20px; */
        text-align: center;
    }



    .text-ggg {
        display: flex;
        justify-content: space-between;
        align-items: center;
        /* line-height: 35px; */
    }

    .gg-22 {
        display: flex;
        align-items: center;
    }

    .text-ggg {
        display: flex;
        justify-content: space-between;
        align-items: center;
        /* line-height: 35px; */
    }

    .web-gggg {
        font-size: 30px;
        padding: 30px;
    }



    .web-gggg .van-radio {
        padding: 10px 0;
        margin: 10px 0;
        border-bottom: 1px solid;
    }

    .title-txt {
        margin: 0;
        font-size: 18px;
        margin-bottom: 5px;
        display: flex;
        align-items: center;
    }

    .title-txt .num {
        background: #1989fa;
        color: white;
        margin-right: 5px;
        padding: 3px;
        border-radius: 50%;
        width: 20px;
        display: inline-block;
        height: 20px;
        text-align: center;
        font-size: 12px;
        height: 20px;
    }
</style>